// import {App} from 'vue'

import { createApp, onUnmounted, type App } from "vue";
import LoginDialog from "./index.vue";

let loginInstance: App | null = null;
let loginEl: HTMLElement | null = null;

// 显示弹窗
const showLoginDialog = () => {
  if (loginInstance && loginEl) return;
  // 创建logindialog实例
  loginInstance = createApp(LoginDialog);
  // 创建挂载体
  loginEl = document.createElement("div");
  document.body.appendChild(loginEl);
  // 挂载
  loginInstance.mount(loginEl);


  onUnmounted(hideLoginDialog);
};
// 隐藏弹窗
const hideLoginDialog = () => {
  if (loginInstance && loginEl) {
    document.body.removeChild(loginEl);
    loginInstance.unmount();
    loginInstance = null;
    loginEl = null;
  }
};

const loginDialogPlugin = {
  // 注册
  install(app: App) {
    // 封装方法:show
    app.config.globalProperties.$showLoginDialog = showLoginDialog;
    // 封装方法:hide
    app.config.globalProperties.$hideLoginDialog = hideLoginDialog;
    // 自定义指令
    // app.directive('login',{
    //     beforeMount(el){
    //          // 创建logindialog实例
    //         loginInstance=createApp(LoginDialog)
    //         // 创建挂载体
    //         const loginDiv=document.createElement('div')
    //         el.appendChild(loginDiv)
    //         // 挂载
    //         loginInstance.mount(loginDiv)

    //     }
    // })
    // // 全局组件
    // app.component('loginDialog',LoginDialog)
  },
};

export default loginDialogPlugin;
